<!DOCTYPE html>
<html>
  <head>
    <title>Layers Control Tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      // 创建一个图层
      var cities = L.layerGroup()
      // 将标记添加到图层
      L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
      L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
      L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
      L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities)

      var mbAttr = 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw'

      var grayscale = L.tileLayer(mbUrl, { id: 'mapbox/light-v9', tileSize: 512, zoomOffset: -1, attribution: mbAttr }),
        streets = L.tileLayer(mbUrl, { id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, attribution: mbAttr })

      var map = L.map('map', {
        center: [39.73, -104.99],
        zoom: 10,
        layers: [grayscale, cities] // 将默认图层添加到地图中
      })

      // 基础图层，互斥的，即一次只能有一个在地图上可见
      var baseLayers = {
        '<span style="color: green">Grayscale</span>': grayscale, // 灰度图层，键名为控件中图层的文本
        Streets: streets // 彩色图层
      }

      // 覆盖层，即基础图层上的所有东西
      var overlays = {
        Cities: cities // 由所有标记合并成的图层
      }

      // 创建图层控件，并添加到地图中
      // 第一个参数是基本图层对象，第二个参数是覆盖层对象，两个参数都是可选的
      L.control.layers(baseLayers, overlays).addTo(map)
    </script>
  </body>
</html>
